<template>
  <Layout>
    <Form ref="form1" :model="dataToQuery" :label-width="120">
        <Row class="query-form">
          <Col span="8">
            <FormItem label="企业名称：" prop="order">
              <cascader-dom class="query-form-el" ref='queryOrgCascader' @setOrgInfo='setQueryCompanyName'
                            :orgTree="true" :setCurrentName="{label:dataToQuery.companyName,value:dataToQuery.companyId}">
              </cascader-dom>
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem label='设备分类：'>
              <Select v-model="dataToQuery.categoryId" class="query-form-el">
                <Option v-for="item in dictMap.categoryList" :value="item.codingCodeId" :key="item.index" :label="item.codingName">
                  {{item.codingName}}
                </Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="8" v-if="!switchFlag">
            <Button @click="switchQuery(true)" class="ivu-btn-switch" type="text">展开∨</Button>
            <Button @click="reset" class="ivu-btn-reset">重置</Button>
            <Button type="primary" class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
          </Col>
          <Col span="8" v-else>
            <FormItem label="设备名称：" prop="eqName">
              <Input v-model='dataToQuery.eqName' class="query-form-el"></Input>
            </FormItem>
          </Col>
        </Row>
        <Row v-show="switchFlag" class="query-form">
          <Col span="8">
            <FormItem label="填表时间：" prop="content">
              <DatePicker class="query-form-el" v-model="dataToQuery.dateRange" format="yyyy-MM-dd"
                          type="daterange" placement="bottom-end" placeholder="请选择查询时间段"
                          @on-change="onSelectQueryDateRange"></DatePicker>
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem label="制造单位：" prop="manufacture">
              <Input v-model='dataToQuery.manufacture' class="query-form-el"></Input>
            </FormItem>
          </Col>
          <Col span="8">
            <Button @click="switchQuery(false)" class="ivu-btn-switch" type="text">收起∧</Button>
            <Button @click="reset" class="ivu-btn-reset">重置</Button>
            <Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
          </Col>
        </Row>
    </Form>
    <Table ref='table' :height="tableHeight" no-data-text="没有查询到相关数据!" @on-selection-change='getSelectRows'
           :loading='pageStatus.loading' border :columns="columns1" :data="dataTable">
    </Table>
    <Row style="margin-right:10px;">
      <Col span="24">
        <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange"
              @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray" show-total show-sizer
              show-elevator/>
      </Col>
    </Row>
  </Layout>
</template>

<script>
import {Api} from '@/api/index.js'
import pageCommonFunction from '@/components/pageCommonFunction.js'
import {sessionStorage} from '@/common/cacheUtils.js';
import {mapState, mapGetters, mapActions} from 'vuex'

var cascaderDom = () => import('@/components/cascader-dom.vue');

export default {
  components: {cascaderDom},
  props: ['companyId', 'modelSearch'],
  computed: {
    ...mapState('trhg', {
      areaMap: state => state.area.areaMap ? state.area.areaMap : [],
      areaTreeMap: state => state.area.areaTreeMap ? state.area.areaTreeMap : {},
    }),
  },
  data() {
    return {
      ...this.createCommonDataField(),
      columns1: [
        {title: '序号', width: 70, fixed: 'left', align: 'center', render: this.indexColumnsRender},
        {key: 'companyName', title: '企业名称', align: 'center', width: 200},
        {key: 'companyAddress', title: '所在省市', align: 'center', width: 140, render: this.renderCellArea},
        {key: 'categoryName', title: '设备类型', align: 'center', width: 150},
        {key: 'eqName', title: '设备名称', align: 'center', width: 150},
        {key: 'eqModel', title: '规格型号', align: 'center', width: 160},
        {key: 'manufacture', title: '制造单位', align: 'center', width: 150},
        {key: 'certificationNum', title: '产品合格证号', align: 'center', width: 140},
        {key: 'licenceNum', title: '使用许可证号', align: 'center', width: 150},
        {key: 'registerNum', title: '设备注册证号', align: 'center', width: 200},
        {key: 'startDate', title: '投用日期', align: 'center', width: 120, render: this.renderCellDate},
        {key: 'examDate', title: '定检日期', align: 'center', width: 120, render: this.renderCellDate},
        {key: 'examResult', title: '检验结果', align: 'center', width: 120, tooltip: true},
        {key: 'examCycleName', title: '检验周期', align: 'center', width: 120},
        {key: 'coordSite', title: '安装位置', align: 'center', width: 120, tooltip: true},
        {key: 'useStatus', title: '使用状况', align: 'center', width: 120, tooltip: true},
        {key: 'createDate', title: '填表时间', align: 'left', width: 120, render: this.renderCellDate},
        {key: 'notes', title: '备注', align: 'center', width: 120, tooltip: true},
        !this.modelSearch ? this.getActionColumns() :
            {
              title: '操作', key: 'action', fixed: 'right', width: 80, align: 'center', render: (h, params) => {
                return h('div', [
                  h('A', {
                    props: {type: 'primary', size: 'small'},
                    style: {fontSize: '12px'},
                    on: {
                      click: () => {
                        this.checkSave(params.row);
                      }
                    }
                  }, '选择'),
                ])
              }
            },
      ],
      show: true,
      tableHeight: 10,
      // api
      queryUrl: Api.querySafeRptSpecialEq,
      exportUrl: Api.exportWorkingRelatedRarties,
      deleteUrl: Api.deleteWorkingRelatedRarties,
      getUrl: Api.getWorkingRelatedRarties,
      updateUrl: Api.updateWorkingRelatedRarties,
      saveUrl: Api.saveWorkingRelatedRarties,
      uploadUrl: Api.uploadMongoFile,
      currentUser: JSON.parse(sessionStorage('userId').get('userId')),

      relatedPartiesModel: false,
      dictMap: {},
      twoLevel: [],
      options: {
        disabledDate(date) {
          return date && date.valueOf() >= new Date();
        }
      },
    }
  },
  async mounted() {
    this.setTableHeight();
    this.pageStatus.baseLoading = true
    await this.$store.dispatch('trhg/area/query', {scope: this}, {root: true})
    this.pageStatus.baseLoading = false
    await this.$http.get(Api.queryCodeDetailBySortId + '/IP-10001', {params: {}}).then((res) => {
      this.dictMap.examCycleList = res.data.data
    });
    await this.$http.get(Api.queryCodeDetailBySortId + '/eq-00001', {params: {}}).then((res) => {
      this.dictMap.categoryList = res.data.data
    });
    this.query();
    this.selectSecGroupNames()
    this.tempAreaTree = this.areaTreeMap['0']
  }
  ,
  methods: {
    ...
        pageCommonFunction,
    checkSave(row) {
      this.$emit('getSelectModelData', row);
    }
    ,

    getSelectCount(row) {
      this.$set(this.dataToView, 'relatedPartiesId', row.bookId)
      this.dataToView.relatedPartiesName = row.contractorName;
      this.relatedPartiesModel = false;
    }
    ,
    selectSecGroupNames() {
      this.$http.get(Api.quqeryTwoOrgInfo).then(res => {
        this.twoLevel = res.data.data
      }).catch(e => {
      })
    }
    ,
    belongChange(value) {
      this.$set(this.dataToView, 'belongOrgId', value.value)
      this.$set(this.dataToView, 'belongOrgName', value.label)
      this.dataToView.companyId = null
      this.dataToView.companyName = null
      this.$refs.orgCascader.resetCurrentOrg();
      this.show = false;
      setTimeout(() => {
        this.show = true
      }, 0)
    }
    ,
    deleteData(params) {
      this.deleteDateAjax(params);
    }
    ,
    query() {
			this.dataToQuery.statistics = 'statistics' //统计详情时候保证后台不会根据当前用户所属机构过滤
      if (this.companyId) {
        this.dataToQuery.companyId = this.companyId
        // this.dataToQuery.ifReport = '0'
      }
      this.queryAjax();
    }
    ,

    submit(name) {
      if (this.dataToView.hazardousWorkItemArr.length > 0) {
        this.dataToView.hazardousWorkItems = this.dataToView.hazardousWorkItemArr.join(',')
      }
      this.submitAjax(name);
    }
    ,
    async beforeEditDialogOpen(data) {
      data.row.hazardousWorkItemArr = data.row.hazardousWorkItems ? data.row.hazardousWorkItems.split(',') : []
    }
    ,
    createEmptyDataToAdd() {
      return {
        createDate: new Date(),
        createUserId: this.currentUser.userId,
        createUserName: this.currentUser.userName,
        id: this.get_uuid(),
        idFiles: [],
        hazardousWorkItemArr: []
      }
    }
    ,
    async afterDataToViewInit() {
      await this.getFiles1('id', 'workingRelatedRarties');
    }
    ,
  }
  ,
  watch: {}
  ,
}
</script>

<style lang='css' scoped>
.ivu-form-item {
  padding-right: 20px;
}

.query-form-el, .ivu-date-picker, .ivu-input-wrapper {
  width: 100%;
}

.demo-upload-list {
  display: inline-block;
  width: 70px;
  height: 70px;
  text-align: center;
  line-height: 70px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  margin-right: 4px;
}

.demo-upload-list img {
  width: 100%;
  height: 100%;
}

.demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, .6);
}

.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}

.demo-upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}
</style>
